<template>
  <div ref="hd">{{title}}</div>
</template>

<script>
  export default {
    data() {
      return {
        title:'子组件',
        timeId:null
      }
    },
    beforeCreate() {
      // 生命周期--创建之前，这个时候没有data，模板也没有挂载，更不能操作模板里的数据
      console.log('子组件：beforeCreate ' + this.title);
      console.log('子组件：beforeCreate ' + this.$refs.hd);
    },
    created (){
      // 生命周期--创建之后，这个时候有data了，可以在这个生命周期发送网络请求获取数据。但模板还没有挂载，不能操作模板里的数据(dom)。
      console.log('子组件：created ' + this.title);
      console.log('子组件：created ' + this.$refs.hd);
      this.timeId = setInterval(() => {
          console.log('子组件定时器');
      },1000)
    },
    beforeMount() {
      // 生命周期--挂载之前，模板依然没有挂载
      console.log('子组件：beforeMount ' + this.$refs.hd);
    },
    mounted() {
      // 生命周期--挂载之后，模板挂载完成
      console.log('子组件：mounted ' + this.$refs.hd);
    },
    beforeUnmount() {
      // 生命周期--卸载之前
      console.log('子组件：beforeUnmount ' + this.$refs.hd);
    },
    unmounted() {
      // 生命周期--卸载之后，通常用于卸载视频播放或定时器。如果不卸载，即使这个组件卸载了，定时器还在跑。
      console.log('子组件：unmounted ' + this.$refs.hd);
      clearInterval(this.timeId);
    },
  }
</script>

<style lang="scss" scoped>

</style>
